{% extends "file_manager/base.html" %}
{% load humanize %}
{% load file_filters %}

{% block content %}
<table class="table table-hover">
    <thead class="table-light">
        <tr>
            <th>
                <a href="?sort=name&order={% if sort == 'name' and order == 'asc' %}desc{% else %}asc{% endif %}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
                    文件名称
                    {% if sort == 'name' %}
                        <i class="fa fa-sort-{% if order == 'asc' %}up{% else %}down{% endif %}"></i>
                    {% endif %}
                </a>
            </th>
            <th>文件路径</th>
            <th style="min-width:120px">文件大小</th>
            <th style="min-width:180px">
                <a href="?sort=mtime&order={% if sort == 'mtime' and order == 'asc' %}desc{% else %}asc{% endif %}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
                    上传时间
                    {% if sort == 'mtime' %}
                        <i class="fa fa-sort-{% if order == 'asc' %}up{% else %}down{% endif %}"></i>
                    {% endif %}
                </a>
            </th>
            <th style="min-width:200px">操作</th>
        </tr>
    </thead>
    <tbody>
        {% for file in files %}
        <tr>
            <td style="max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ file.name }}">
                {% if file.is_dir %}
                <div class="d-flex align-items-center">
                    <span class="d-flex align-items-center me-2">
                        <a href="#collapse{{ forloop.counter }}" 
                           data-bs-toggle="collapse" 
                           class="text-decoration-none me-1">
                        </a>
                        <a href="/{{ file.path|relpath }}" class="text-decoration-none" title="{{ file.name }}">
                            📁 {{ file.name }}
                        </a>
                    </span>
                </div>
                <div class="collapse" id="collapse{{ forloop.counter }}">
                    <!-- 子目录内容 -->
                </div>
                {% else %}
                <div class="d-flex align-items-center">
                    <span class="me-2" title="{{ file.name }}">
                        📄 {{ file.name }}
                    </span>
                </div>
                {% endif %}
            </td>
            <td style="max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ file.display_path }}">{{ file.display_path }}</td>
            <td>
                {% if file.is_dir %}
                ~{{ file.size|filesizeformat }}
                {% else %}
                {{ file.size|filesizeformat }}
                {% endif %}
            </td>
            <td>{{ file.mtime|date:"Y-m-d H:i:s" }}</td>
            {% if not file.is_dir %}
            <td>
                <div class="d-flex align-items-center">
                    <a href="/{{ file.path|relpath }}" 
                       class="btn btn-sm btn-outline-success me-1">下载</a>
                    {% if file.path|slice:'-4:' in '.png.jpg.jpeg.gif.bmp.tif.webp.svg.heic.raw.mp4.webm.ogg.mp3.wav.pdf.doc.docx.xls.xlsx.ppt.pptx' or file.path|slice:'-5:' in '.jpeg.tiff.heif' %}
                    <a href="{% url 'preview' file_path=file.path|relpath %}"
                       target="_blank"
                       class="btn btn-sm btn-outline-secondary me-1">预览</a>
                    {% endif %}
                    <i class="fa fa-copy text-info me-1" 
                       style="cursor:pointer;font-size:1.2rem"
                       title="复制下载链接"
                       onclick="copyDownloadLink(this, '/{{ file.path|relpath }}')"></i>
                    <i class="fa fa-qrcode text-primary me-1" 
                       style="cursor:pointer;font-size:1.2rem"
                       data-url="/{{ file.path|relpath }}"
                       onclick="showDownloadQR(this)"></i>
                </div>
            </td>
            {% endif %}
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 分页导航 -->
<div class="pagination mt-4">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}{% if order %}&order={{ order }}{% endif %}" class="btn btn-sm btn-outline-primary">&laquo; 首页</a>
            <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}{% if order %}&order={{ order }}{% endif %}" class="btn btn-sm btn-outline-primary">上一页</a>
        {% endif %}

        <span class="current">
            第 {{ page_obj.number }} 页 / 共 {{ page_obj.paginator.num_pages }} 页
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}{% if order %}&order={{ order }}{% endif %}" class="btn btn-sm btn-outline-primary">下一页</a>
            <a href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}{% if order %}&order={{ order }}{% endif %}" class="btn btn-sm btn-outline-primary">末页 &raquo;</a>
        {% endif %}
    </span>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function copyDownloadLink(element, url) {
        const fullUrl = window.location.origin + url;
        
        // 创建临时textarea元素
        const textarea = document.createElement('textarea');
        textarea.value = fullUrl;
        textarea.style.position = 'fixed';  // 防止页面滚动
        document.body.appendChild(textarea);
        textarea.select();
        
        try {
            // 尝试使用现代API
            if (navigator.clipboard) {
                navigator.clipboard.writeText(fullUrl).then(() => {
                    showCopyFeedback(element, true);
                }).catch(() => {
                    // 现代API失败时使用传统方法
                    document.execCommand('copy');
                    showCopyFeedback(element, true);
                });
            } else {
                // 使用传统方法
                document.execCommand('copy');
                showCopyFeedback(element, true);
            }
        } catch (err) {
            console.error('复制失败:', err);
            showCopyFeedback(element, false);
        } finally {
            document.body.removeChild(textarea);
        }
    }
    
    function showCopyFeedback(element, success) {
        const originalTitle = element.getAttribute('title');
        element.setAttribute('title', success ? '已复制!' : '复制失败');
        
        // 添加视觉反馈
        element.style.transform = 'scale(1.2)';
        element.style.transition = 'transform 0.3s';
        setTimeout(() => {
            element.style.transform = 'scale(1)';
        }, 300);
        
        setTimeout(() => {
            element.setAttribute('title', originalTitle);
        }, 2000);
    }
</script>
{% endblock %}
